<template>
	<view class="page">
		<free-nav-bar showback showright="true" title="选择">

			<view slot="right" class="main-bg-color rounded mr-3 px-2 py-1">
				<text class="font text-white"
					@click="handleBar">{{type == 'creategroup' ? `创建群组(${selectNum})`:'多选'}}</text>


			</view>
		</free-nav-bar>


		</free-list-item>
		<view class="px-2 py-1">
			<text class="text-muted font-sm">最近联系人</text>
		</view>
		<scroll-view scroll-y="true" :style="'height:'+scrollHeight+'px'" :scroll-into-view="scrollinto">

			<view class="" v-for="item,index in list" style="width: 92%;" :id="'item'+index">

				<view v-if="item.list.length!==0" class="py-2 px-1 border-bottom bg-light"> <text
						class="font-md text-dark">{{item.title}}</text></view>
				<free-list-item v-for="item1,index1 in item.list" showright
					:cover="item1.avatar == ''?'/static/images/mail/friend.png':item1.avatar"
					:title="item1.name == ''?item1.username:item1.name">
					<view class="border rounded-circle flex align-center justify-center" slot="right"
						style="width: 40rpx;height: 40rpx; " @click="mulclick(item1)">
						<view class="main-bg-color rounded-circle" v-if="item1.checked == true"
							style="width: 30rpx;height: 30rpx;">

						</view>
					</view>
				</free-list-item>

			</view>
		</scroll-view>
		<!-- 导航栏 -->
		<view class="position-fixed right-0 bottom-0 bg-light flex flex-column" @touchstart="touchstart"
			@touchmove="touchmove" @touchend="touchend" style="width: 60rpx;" :style="'top:'+top+'px;'">
			<view class="flex-1 flex align-center justify-center" v-for="item in list">
				<text class="font font-sm text-muted text-secondary">{{item.title}}</text>

			</view>
		</view>

		<free-popup maskColor ref="confirmpopup" :center="true">
			<view class="bg-white rounded flex flex-column" style="width: 600rpx;">
				<view class="p-4 flex flex-column">
					<text class="font-md font-weight-bold mb-3">发送给：</text>
					<scroll-view scroll-x="true" class="flex">
						<view>
							<free-avater
								src="https://profile-avatar.csdnimg.cn/3365568353cd44c2acf217ab8b6345f9_weixin_47365777.jpg!1">
							</free-avater>
						</view>
					</scroll-view>
					<view class="my-3 bg-light rounded p-2">
						<text class="font text-light-muted">[个人名片]昵称</text>


					</view>
					<input type="text" placeholder="给朋友留言" class="border-bottom" style="height: 60rpx;">
				</view>
				<view class="border-top flex align-stretch" style="height: 100rpx;">
					<view @click="submit()" class="flex-1 border-right flex align-center justify-center">
						<text>取消</text>
					</view>
					<view @click="submit()" class="flex-1 flex align-center justify-center">
						<text>发送</text>

					</view>
				</view>
			</view>
		</free-popup>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import freeListItem from "@/components/free-ui/free-list-item.vue"
	import freePopup from "@/components/free-ui/free-popup.vue"
	import freeAvater from "@/components/free-ui/free-avater.vue"
	import $H from '../../../utils/request.js';
	import {
		mapState
	} from "vuex"
	export default {
		components: {
			freeNavBar,
			freeListItem,
			freeAvater,
			freePopup
		},
		data() {
			return {
				top: 0,
				key: "",
				multiselect: false,
				scrollHeight: 0,
				checknum: 0,
				scrollinto: "",
				selectList: [],
				type: ""
			}
		},
		computed: {
			...mapState({
				list: state => state.user.mailList
			}),
			searchlist() {
				console.log(this.list, "list");
				// return this.list.filter(item =>
				// 	item.name.indexOf(this.key)!==-1
				// )
			},
			// selectList() {
			// 	return this.list.filter(item =>
			// 		item.checked === true
			// 	)
			// },
			selectNum() {
				console.log(this.selectList.length, "len");
				return this.selectList.length
			},


		},
		onLoad(e) {

			let res = uni.getSystemInfoSync();
			this.top = res.statusBarHeight + uni.upx2px(30)
			if (e.type) {
				this.type = e.type
			}
			this.list.forEach(el => {
				console.log(el.list, "ellist");
				el.list.forEach(el1 => {
					el1.checked = false
				})
			})
			this.scrollHeight = res.windowHeight - this.top - 40
		},
		methods: {
			inputuser() {

				console.log(this.searchlist, "sea");
			},
			submit() {
				this.$refs.confirmpopup.hidden()
			},
			mulclick(item) {
				item.checked = !item.checked;
				if (item.checked) {

					this.selectList.push(item)
				} else {
					let index = this.selectList.findIndex(item => item == item)
					this.selectList.splice(index, 1)
				}


				console.log(this.selectList, "thisselect");
			},
			handleBar() {
				let arr=this.selectList.map(item=>{
					return item.user_id
				})
				$H.post("group/create", {
					ids: arr.join(",")
				}, {
					token: true
				}).then(res => {
					if(res){
						uni.showToast({
							title:"创建成功",
							icon:"none"
						})
						uni.navigateBack({
							delta:1
						})
					}
				})
			},
		}
	}
</script>

<style>

</style>
